<template>
  <div>
		<el-space>
			<el-form inline>
				<el-form-item label="姓名">
					<el-input v-model="params.name" placeholder="请输入客户姓名"></el-input>
				</el-form-item>
				<el-form-item label="入住日期">
					 <el-date-picker
							v-model="params.date"
							type="daterange"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							value-format="YYYY-MM-DD"
						/>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="getList">查询</el-button>
				</el-form-item>
			</el-form>
		</el-space>
		<el-divider />
		<div>
			<el-radio-group v-model="params.isDeleted" @change="getList">
				<el-radio-button :value="0">正在使用</el-radio-button>
				<el-radio-button :value="1">使用历史</el-radio-button>
			</el-radio-group>
			<el-table :data="tableData.records">
				<el-table-column label="客户姓名" prop="name"></el-table-column>
				<el-table-column label="性别">
					<template #default="scope">
						<span>{{scope.row.sex === 0 ? '女' : '男'}}</span>
					</template>
				</el-table-column>
				<el-table-column label="床位详情" prop="bedDetails"></el-table-column>
				<el-table-column label="床位使用起始日期" prop="startDate"></el-table-column>
				<el-table-column label="床位使用结束日期" prop="endDate"></el-table-column>
				<el-table-column label="操作">
					<template #default="scope">
						<el-button type="warning" size="small" @click="update(scope.row.id)">床位调换</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				background
				v-model:current-page="params.pageNo"
				:page-count="tableData.pages"
				@change="getList"></el-pagination>
		</div>
		<el-dialog
			v-model="editDialog.show"
			title="床位调换"
			width="700px"
			:close-on-click-modal="false">
			<Edit v-model:show="editDialog.show" :urls="request_url" :id="editDialog.id" :getTable="getList" v-if="editDialog.show" />
		</el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { get } from '@/axios'
import Edit from './component/edit'
const modelUrl = '/beddetails'
const request_url = {
	list: modelUrl + '/list',
	getById: modelUrl + '/getById',
	update: modelUrl + '/update'
/* 	del: modelUrl + '/delete',
	add: modelUrl + '/add',*/
}
const params = reactive({
	pageNo: 1,
	pageSize: 10,
	name: '',
	date: null,
	isDeleted: 0
})
const editDialog = reactive({
	show: false,
	id: null
})
const tableData = ref({})

function getList () {
	const querty = {
		pageNo: params.pageNo,
		pageSize: params.pageSize,
		name: params.name,
		startDate: params.date === null ? null : params.date[0],
		endDate: params.date === null ? null : params.date[1],
		isDeleted: params.isDeleted
	}
	get(request_url.list, querty, content => {
		tableData.value = content
	})
}
function update(id) {
	console.dir(editDialog)
	editDialog.id = id
	editDialog.show = true
}

getList()
</script>

<style scoped lang="scss">
.el-table {
	margin-top: 10px;
}
</style>